<template>
  <div class="create_connection_div">
    <el-header style="background-color: #aaafa8">{{selectNode}} - ETH 连接配置</el-header>
    <el-form :model="eth" label-width="100px" class="config_form">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-form-item label="名称">
          <el-input v-model="eth['create-eth-connection'].input['connection-name']" readonly autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="协议">
          <el-select v-model="eth['create-eth-connection'].input['layer-protocol-name']"
                     placeholder="请选择协议">
            <el-option
                v-for="(i,index) in layerProtocolName"
                :key="index"
                :value="i">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务类型">
          <el-select v-model="eth['create-eth-connection'].input['service-type']"
                     placeholder="请选择服务类型">
            <el-option
                v-for="(i,index) in serviceType"
                :key="index"
                :value="i">
            </el-option>
          </el-select>
        </el-form-item>
        <el-collapse-item title="以太网用户侧---（可选配置）" name="1">
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-form-item label="端口名称">
              <el-input v-model="eth['create-eth-connection'].input['eth-uni']['uni-ptp-name']" autocomplete="off"></el-input>
            </el-form-item>

            <el-collapse-item title="客户Vlan规格">
              <el-form-item label="id">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['client-vlan-spec']['vlan-id']" multiple
                           placeholder="请选择VlanID">
                  <el-option
                      v-for="(id,index) in vlanId"
                      :key="index"
                      :value="id">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="优先级">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['client-vlan-spec']['vlan-priority']" clearable
                           placeholder="请选择优先级">
                  <el-option
                      v-for="(i,index) in vlanPriority"
                      :key="index"
                      :value="i">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="访问操作">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['client-vlan-spec']['access-action']" clearable
                           placeholder="请选择访问操作">
                  <el-option
                      v-for="(i,index) in accessAction"
                      :key="index"
                      :value="i">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="类型">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['client-vlan-spec']['vlan-type']" clearable
                           placeholder="请选择Vlan类型">
                  <el-option label="c-tag" value="c-tag"></el-option>
                  <el-option label="s-tag" value="s-tag"></el-option>
                  <el-option label="un-tag" value="un-tag"></el-option>
                  <el-option label="unknown" value="unknown"></el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="入口Vlan规格">
              <el-form-item label="id">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['uni-vlan-spec']['vlan-id']" multiple
                           placeholder="请选择VlanID">
                  <el-option
                      v-for="(id,index) in vlanId"
                      :key="index"
                      :value="id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="访问操作">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['uni-vlan-spec']['access-action']" clearable
                           placeholder="请选择访问操作">
                  <el-option
                      v-for="(i,index) in accessAction"
                      :key="index"
                      :value="i">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="优先级">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['uni-vlan-spec']['vlan-priority']" clearable
                           placeholder="请选择优先级">
                  <el-option
                      v-for="(i,index) in vlanPriority"
                      :key="index"
                      :value="i">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类型">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['uni-vlan-spec']['vlan-type']" clearable
                           placeholder="请选择Vlan类型">
                  <el-option
                      v-for="(id,index) in vlanType"
                      :key="index"
                      :value="id">
                  </el-option>
                </el-select>
              </el-form-item>

            </el-collapse-item>

            <el-collapse-item title="Ftp-Vlan规格">
              <el-form-item label="id">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['ftp-vlan-spec']['vlan-id']" multiple
                           placeholder="请选择VlanID">
                  <el-option
                      v-for="(id,index) in vlanId"
                      :key="index"
                      :value="id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="访问操作">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['ftp-vlan-spec']['access-action']" clearable
                           placeholder="请选择访问操作">
                  <el-option
                      v-for="(i,index) in accessAction"
                      :key="index"
                      :value="i">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="优先级">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['ftp-vlan-spec']['vlan-priority']" clearable
                           placeholder="请选择优先级">
                  <el-option
                      v-for="(i,index) in vlanPriority"
                      :key="index"
                      :value="i">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="类型">
                <el-select v-model="eth['create-eth-connection'].input['eth-uni']['ftp-vlan-spec']['vlan-type']" clearable
                           placeholder="请选择Vlan类型">
                  <el-option
                      v-for="(id,index) in vlanType"
                      :key="index"
                      :value="id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>

          </el-collapse>
        </el-collapse-item>
        <el-collapse-item title="主用线路侧" name="2">
          <el-form-item label="端口名称">
            <el-input v-model="eth['create-eth-connection'].input['primary-nni']['nni-ptp-name']" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时隙信息">
            <el-input v-model="eth['create-eth-connection'].input['primary-nni']['nni-ts-detail']" placeholder="采用“SS-BB”的形式"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="净荷类型">
            <el-select v-model="eth['create-eth-connection'].input['primary-nni']['odu-signal-type']" clearable
                       placeholder="请选择净荷类型">
              <el-option
                  v-for="(i,index) in clientSignalType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适配类型">
            <el-select v-model="eth['create-eth-connection'].input['primary-nni']['adaptation-type']" clearable
                       placeholder="请选择适配类型">
              <el-option
                  v-for="(i,index) in adaptationType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交换能力">
            <el-select v-model="eth['create-eth-connection'].input['primary-nni']['switch-capability']" clearable
                       placeholder="请选择交换能力">
              <el-option
                  v-for="(i,index) in switchType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>

        </el-collapse-item>
        <el-collapse-item title="备用线路侧---（可选配置）" name="3">
          <el-form-item label="端口名称">
            <el-input v-model="eth['create-eth-connection'].input['secondary-nni']['nni-ptp-name']" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时隙信息">
            <el-input v-model="eth['create-eth-connection'].input['secondary-nni']['nni-ts-detail']" placeholder="采用“SS-BB”的形式"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="净荷类型">
            <el-select v-model="eth['create-eth-connection'].input['secondary-nni']['odu-signal-type']" clearable
                       placeholder="请选择净荷类型">
              <el-option
                  v-for="(i,index) in clientSignalType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适配类型">
            <el-select v-model="eth['create-eth-connection'].input['secondary-nni']['adaptation-type']" clearable
                       placeholder="请选择适配类型">
              <el-option
                  v-for="(i,index) in adaptationType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交换能力">
            <el-select v-model="eth['create-eth-connection'].input['secondary-nni']['switch-capability']" clearable
                       placeholder="请选择交换能力">
              <el-option
                  v-for="(i,index) in switchType"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item title="请求连接带宽---（可选配置）" name="4">
          <el-form-item label="TDM">
            <el-input type="number" v-model="eth['create-eth-connection'].input['requested-capacity']['total-size']"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="cbs">
            <el-input type="number" v-model="eth['create-eth-connection'].input['requested-capacity'].cbs" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="cir">
            <el-input type="number" v-model="eth['create-eth-connection'].input['requested-capacity'].cir" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="ebs">
            <el-input type="number" v-model="eth['create-eth-connection'].input['requested-capacity'].ebs" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="eir">
            <el-input type="number" v-model="eth['create-eth-connection'].input['requested-capacity'].eir" autocomplete="off"></el-input>
          </el-form-item>
        </el-collapse-item>

      </el-collapse>
      <!--          <el-divider content-position="left">主nni</el-divider>-->

      <!--          <el-divider content-position="left">层协议名</el-divider>-->

      <!--          <el-divider content-position="left">连接名称</el-divider>-->

      <!--          <el-divider content-position="left">请求容量</el-divider>-->


      <el-form-item>
        <el-image
            style="width: 20px; height: 25px;"
            :src="require('@/assets/union_rule_font.jpg')"
            :preview-src-list="[require('@/assets/union/ETH交叉连接.png')]">
        </el-image>
        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <!--    <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="sendJson">确 定</el-button>
        </div>-->
    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
    <el-dialog title="ETH" :visible.sync="dialogFormVisible" class="myDialog">
      <el-form :model="eth">
        <el-form-item label="eth-uni">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['uni-ptp-name']" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="vlan-id">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['client-vlan-spec']['vlan-id'][0]" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="access-action">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['client-vlan-spec']['access-action']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="vlan-priority">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['client-vlan-spec']['vlan-priority']" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="vlan-type">
          <el-select v-model="eth['create-eth-connection'].input['eth-uni']['client-vlan-spec']['vlan-type']" placeholder="请选择Vlan类型">
            <el-option label="c-tag" value="c-tag"></el-option>
            <el-option label="s-tag" value="s-tag"></el-option>
            <el-option label="un-tag" value="un-tag"></el-option>
            <el-option label="unknown" value="unknown"></el-option>
          </el-select>
          <!--          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['client-vlan-spec']['vlan-type']" autocomplete="off"></el-input>-->
        </el-form-item>

        <el-form-item label="vlan-id">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['ftp-vlan-spec']['vlan-id'][0]" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="access-action">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['ftp-vlan-spec']['access-action']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="vlan-priority">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['ftp-vlan-spec']['vlan-priority']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="vlan-type">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['ftp-vlan-spec']['vlan-type']" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="vlan-id">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['uni-vlan-spec']['vlan-id'][0]" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="access-action">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['uni-vlan-spec']['access-action']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="vlan-priority">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['uni-vlan-spec']['vlan-priority']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="vlan-type">
          <el-input v-model="eth['create-eth-connection'].input['eth-uni']['uni-vlan-spec']['vlan-type']" autocomplete="off"></el-input>
        </el-form-item>
        <el-divider content-position="left">主nni</el-divider>
        <el-form-item label="nni-ptp-name">
          <el-input v-model="eth['create-eth-connection'].input['primary-nni']['nni-ptp-name']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="adaptation-type">
          <el-input v-model="eth['create-eth-connection'].input['primary-nni']['adaptation-type']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="nni-ts-detail">
          <el-input v-model="eth['create-eth-connection'].input['primary-nni']['nni-ts-detail']" autocomplete="off"></el-input>
        </el-form-item>
        <el-divider content-position="left">层协议名</el-divider>
        <el-form-item label="layer-protocol-name">
          <el-input v-model="eth['create-eth-connection'].input['layer-protocol-name']" autocomplete="off"></el-input>
        </el-form-item>
        <el-divider content-position="left">连接名称</el-divider>
        <el-form-item label="连接名称">
          <el-input v-model="eth['create-eth-connection'].input['connection-name']" autocomplete="off"></el-input>
        </el-form-item>
        <el-divider content-position="left">请求容量</el-divider>
        <el-form-item label="requested-capacity">
          <el-input v-model="eth['create-eth-connection'].input['requested-capacity']['total-size']" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="cbs">
          <el-input v-model="eth['create-eth-connection'].input['requested-capacity'].cbs" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="cir">
          <el-input v-model="eth['create-eth-connection'].input['requested-capacity'].cir" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="ebs">
          <el-input v-model="eth['create-eth-connection'].input['requested-capacity'].ebs" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="eir">
          <el-input v-model="eth['create-eth-connection'].input['requested-capacity'].eir" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>

    </el-dialog>
  </div>


</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      activeNames: ['1'],
      selectNode:'',
      //服务类型
      serviceType: ['EPL', 'EVPL', 'SDH', 'ODU'],
      //协议名称 PTP下还有OCH OMS
      layerProtocolName: ['ETH', 'ODU', 'SDH'],
      //vlan号 4094
      vlanId: [1, 2, 3, 4, 5, 6],
      //vlan类型
      vlanType: ['C_TAG', 'S_TAG', 'UN_TAG'],
      //vlan优先级
      vlanPriority: [0, 1, 2, 3, 4, 5, 6, 7],
      //访问操作
      accessAction: ['KEEP', 'PUSH_POP', 'EXCHANGE'],
      //净荷类型
      clientSignalType: ['ODU0', 'ODU1', 'ODU2', 'ODU4', 'STM-1', 'STM-4', 'STM-16', 'STM-64', 'GE', '10GE-LAN'],
      //适配类型 默认使用GFP-F
      adaptationType: ['CBR_AMP', 'CBR_BMP', 'GFP-T', 'GFP-F', 'NULL', 'PRBS', 'CBRx', 'CBRX_GMP', 'ODUij', 'ODUj21', 'ODUk ', 'unknown'],
      //交换能力
      switchType: ['ODU0', 'ODU1', 'ODU2', 'ODU2e', 'ODU3', 'ODU4', 'ODUflex-GFP', 'ODUflex-CBR'],
      dialogTableVisible: false,
      dialogFormVisible: false,
      eth: {
        "create-eth-connection":{
          input: {
            "eth-uni": {
              "uni-ptp-name": "HC-OTN208_BOX",
              "client-vlan-spec": {
                "vlan-id": [
                  17, 12, 14
                ],
                "vlan-priority": "3",
                "access-action": "keep",
                "vlan-type": "un-tag"
              },
              "uni-vlan-spec": {
                "vlan-id": [
                  "18"
                ],
                "vlan-priority": "5",
                "access-action": "keep",
                "vlan-type": "un-tag"
              },
              "ftp-vlan-spec": {
                "vlan-id": [
                  "19"
                ],
                "vlan-priority": "6",
                "access-action": "keep",
                "vlan-type": "un-tag"
              }
            },
            "primary-nni": {
              "nni-ptp-name": "/1/1/1/101",
              "nni-ts-detail": "8-00",
              "odu-signal-type": '',
              "adaptation-type": "CBR_AMP",
              "switch-capability": '',
            },
            "secondary-nni": {
              "nni-ptp-name": "/1/1/1/101",
              "nni-ts-detail": "8-00",
              "odu-signal-type": '',
              "adaptation-type": "CBR_AMP",
              "switch-capability": '',
            },
            "connection-name": "con_name_1",
            "service-type": "EPL",
            "layer-protocol-name": "ETH",
            "pg-id": "",
            "requested-capacity": {
              "total-size": "1010",
              "cbs": "1001",
              "cir": "1002",
              "ebs": "1003",
              "eir": "1004"
            }
          }
        }
      },
    }

  },
  methods: {
    async sendJson() {
      this.$bus.$emit('eth-connection', this.eth);
      // console.log(this.eth);
      // const {data: res} = await this.$http.post("/test/rpc", this.eth);
      // console.log("返回结果", res);
      // this.dialogFormVisible = false;

    },
    submitForm(){
      console.log(JSON.stringify(this.eth))
      if (this.nodeName!==''){
        axios.post("/node/" + this.selectNode + "/create_connection/eth", {context: JSON.stringify(this.eth)}).then(
            response => {
              console.log("创建eth成功", response.data);
              this.$message.success("创建eth成功" + response.data);
            },
            error => {
              console.log("错误：", error.message);
              this.$message.error(error.message);
            }
        )
      }else {
        this.$message.warning('请选择节点后再进行操作');
      }

    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleChange(val) {
      console.log(val);
    }

  },
  mounted() {
    this.$bus.$on('node-name',(data)=>{
      this.selectNode = data;
    })
  }
}

</script>

<style>
.create_connection_div {
  width: 300px;
  height: auto;
  padding-left: 6px;
  margin-left: 6px;
  float: left;
  /*border: #d22020 1px solid;*/
}

.div el-form {
  label-width: "auto";
}

.el-form-item el-input {
  label-width: 246px;
}

.div {
  width: 600px;
}
</style>